<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../brand-font/iconfont.css">
    <link rel="stylesheet" href="../css/footer.css">
    <link rel="stylesheet" href="../css/index1.css">
    <link rel="stylesheet" href="../css/shopCar.css">
    <script src="../js/jquery.js"></script>
    <script src="../js/header.js"></script>
    <script src="../js/cookie.js"></script>
    <script>
        $(function() {
            if (!cookie.get('isLogin')) { //判断是否登录
                $('.reg').on('click', function() {
                    location.href = 'login.html';
                })
                $('.slide-login').on('click', function() {
                    location.href = "login.html";
                })
            } else {
                var phoneUser = cookie.get('user');
                var before = phoneUser.slice(0, 3);
                var after = phoneUser.slice(6, -1);
                $('.reg').html(before + '****' + after);
                $('.reg').on('click', function() {
                    location.href = 'userInfo.html';
                })
                $('.slide-login').on('click', function() {
                    location.href = "userInfo.html";
                })
            }

            var shop = cookie.get('shop');
            console.log(shop); //JSON字符串
            if (shop) {
                shop = JSON.parse(shop);
                // console.log(shop[0].num);
                var idList = shop.map(elm => elm.id).join();
                // console.log(idList);
                // shop.forEach(function(numelm, index) { //cookie中的每个num值
                // console.log(numelm.num);

                $.ajax({
                    type: "get",
                    url: "../php/shopCar.php",
                    data: {
                        'idList': idList
                    },
                    dataType: "json",
                    success: function(d) {
                            console.log(d);
                            // let pic = JSON.parse(data[0].src);
                            // console.log(pic);
                            // console.log(JSON.parse(cookie.get('shop.num')));
                            var tempstr = '';

                            d.forEach((elm, i) => {
                                console.log(elm.id);
                                let pic = JSON.parse(elm.src);
                                let price = JSON.parse(elm.price);
                                let size = JSON.parse(elm.size);
                                let num = JSON.parse(cookie.get('shop'))[i].num;
                                // var caclSum = numelm.num * price[0].now;
                                // console.log(caclSum);
                                tempstr += `
                                <li>
                            <div class="single"><input type="checkbox" name="single" class="singlebox"></div>
                            <div class="carImg"><img src="${pic[3]['0']}"></div>
                            <div class="carInfo">
                                <p>Gap</p>
                                <p>
                                    ${d[i].title}
                                </p>
                                <div class="specifications">
                                    <p><span>颜色：</span> ${d[i].color}</p>
                                    <p><span>尺码：</span> 29/30(170/74A)</p>
                                </div>
                                <p><span>￥${price[0].now}</span><del>￥${price[0].before}</del></p>
                                <div class="opeator"><span>编辑</span><i class="delete">删除</i></div>

                            </div>
                            <div class="increase">
                         <em>-</em><span>${num}</span><em>+</em>
                            </div>
                            <div class="single-price"><span>￥<i>${num*price[0].now}</i></span></div>
                        </li>`;
                                // var arr = shop.filter((val, i) => {
                                //     return val.id == elm.id;
                                // });
                                // console.log(val);


                            });
                            $('.list-car').append(tempstr);
                            $('.delete').on('click', function() {
                                    var deleIndex = $(this).parents('li').index();
                                    // console.log(deleIndex);
                                    deleteList(deleteList); //传入li的index
                                })
                                // console.log(shop);
                            function deleteList(i) { //删除操作
                                var rmo = shop.splice(i, 1);
                                cookie.remove('shop');
                                cookie.set('shop', JSON.stringify(shop), 1);
                                location.reload();
                            }
                            $('#all').on('click', function() { //全选
                                if (this.checked) {
                                    var sum = 0;
                                    // console.log(shop[obj.liIndex].num * shop[obj.liIndex].price);
                                    shop.forEach(elm => {
                                        var count = elm.price * elm.num;
                                        sum = count + sum;
                                    })
                                    $('.good-price b').html(sum);
                                    $('input[type=checkbox]:not(#all)').prop('checked', $(this).prop('checked'));
                                } else {
                                    $('input[type=checkbox]:not(#all)').prop('checked', false);
                                    $('.good-price b').html('0.00');
                                }
                            })
                            $('.singlebox').on('click', function(ev) { //单选
                                var chooseIndex = $(this).parents('li').index();
                                // console.log(ev.target);
                                var sum = 0;
                                var arr = [];
                                // console.log(shop[obj.liIndex].num * shop[obj.liIndex].price);
                                shop.forEach(elm => {
                                    console.log(elm);
                                    var count = elm.price * elm.num;
                                    // sum = count + sum;
                                    arr.push(count);
                                })
                                console.log(arr);
                                arr.forEach((elm, i) => {
                                        sum = elm + sum;
                                    })
                                    // console.log(sum);
                                if (this.checked) {
                                    $('.good-price b').html(arr[chooseIndex]);
                                    // $('.all-price b').html(sum);
                                } else {
                                    arr[chooseIndex] = '0.00';
                                    $('.good-price b').html(arr[chooseIndex]);
                                }
                            })
                            var obj = {
                                'liIndex': 0,
                            }
                            $('.increase>em').on('click', function(e) { //加减数量操作
                                // console.log($(this).siblings('span').text('1'));
                                obj.liIndex = $(this).parents('li').index();
                                console.log(obj.liIndex);
                                // console.log(liIndex);
                                // console.log(e.target);
                                var index = $(e.target).index();
                                // console.log(index);
                                var val = parseInt($(this).siblings('span').html());
                                console.log(val);
                                if (index == 0) {
                                    if (val > 1) {
                                        val--;
                                        // $('.good-price b').html(val * price[0].now);
                                    }
                                } else if (index == 2) {
                                    val++;
                                }
                                // console.log(val);
                                $(this).siblings('span').html(val);
                                change(val);

                                function change(value) { //加减数量改变后，重新存入cookie
                                    // console.log(shop[obj.liIndex].id);
                                    if (shop.some((elm1, i) => elm1.id == shop[obj.liIndex].id)) {
                                        // console.log(elm);
                                        shop.forEach(elm1 => {
                                            elm1.id == shop[obj.liIndex].id ? elm1.num = value : null;
                                        });
                                    }
                                    location.reload();
                                    cookie.set('shop', JSON.stringify(shop), 1);
                                    // $('.single-price b').html(shop[obj.liIndex].num * price[0].now);

                                }
                            })
                            $('.calc').on('click', function() {
                                alert('总计：' + $('.good-price b').html());
                            })
                        } //success结束
                });
            }
        });
    </script>
</head>

<body>
    <div class="header">
        <div class="header-top">
            <div class="inner">
                <ul class="sm-logo">
                    <li class="gap-logo">
                        <a href="#"><i class="iconfont">&#xe6c9;</i></a>
                    </li>
                    <li class="old-logo">
                        <a href="javascript:;"><i class="iconfont">&#xe622;</i></a>

                    </li>
                </ul>
                <strong>
                        全场免运 | 正价商品退换货包邮
                        <a href="javascript:;" style="color: #fff">查看详情</a>
                    </strong>
                <div class="service">
                    <span>售后服务热线 400-680-8517</span>
                    <span class="concustomer">
                            <i class="iconfont">&#xe609;</i>
                            <span>在线客服</span>
                    </span>
                </div>
            </div>
        </div>
        <div class="fixed">
            <div class="header-logo">
                <div class="inner">
                    <div class="gap"><a href="javascript:;"><i class="iconfont">&#xe6c9;</i></a>
                        <div class="login">
                            <div class="login-top">
                                <span class="reg"><i class="iconfont">&#xe604;</i>注册/登录</span>
                                <span class="shopbag"><i class="iconfont">&#xe602;</i>我的购物袋</span>
                            </div>
                            <form class="search"><input type="text" placeholder="搜索关键词"><i class="iconfont">&#xe6e8;</i></form>
                        </div>
                        <div class="login-slideUp">
                            <span><i class="iconfont slide-search">&#xe6e8;</i></span><i class="iconfont slide-login">&#xe604;</i><i class="iconfont slide-bag">&#xe602;</i>
                        </div>
                    </div>
                </div>
            </div>
            <section class="nav">
                <div class="inner hei">
                    <ul>
                        <li>
                            <a href="index1.html" style="padding-left: 0;">首页</a>
                        </li>
                        <li>
                            <a href="javascript:;">新品</a>
                            <div class="subnav">
                                <ul>
                                    <li><a href="#">分类索引</a></li>
                                    <li><a href="#">女装</a></li>
                                    <li><a href="#">男装</a></li>
                                    <li><a href="#">女幼</a></li>
                                    <li><a href="#">男幼</a></li>
                                    <li><a href="#">女装</a></li>
                                    <li><a href="#">女婴</a></li>
                                    <li><a href="#">男婴</a></li>
                                    <li><a href="#">GapFit</a></li>
                                    <li><a href="#">Sale</a></li>
                                    <li><a href="#">孕妇装</a></li>
                                </ul>
                                <div>
                                    <a href="#"><img src="../img/img/index/700F0B3AB07A9B9A947939201E5DE44E.jpg" alt=""></a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <a href="javascript:;">女装</a>
                        </li>
                        <li>
                            <a href="javascript:;">男装</a>
                        </li>
                        <li>
                            <a href="javascript:;">女孩</a>
                        </li>
                        <li>
                            <a href="javascript:;">男孩</a>
                        </li>
                        <li>
                            <a href="javascript:;">幼儿（1-5岁)</a>
                        </li>
                        <li>
                            <a href="javascript:;">婴儿（0-24个月)</a>
                        </li>
                        <li>
                            <a href="javascript:;">孕妇装</a>
                        </li>
                        <li>
                            <a href="javascript:;">GapFit</a>
                        </li>
                        <li>
                            <a href="javascript:;" style="padding-right: 0;">Sale</a>
                        </li>
                    </ul>
                </div>
            </section>
        </div>
    </div>
    <section class="carPage">
        <div class="inner">
            <div class="bag"><span>我的购物袋</span><i>[ 共 1 件商品 ]</i></div>
            <div class="main">
                <div class="left-container">
                    <div class="setting">
                        <div class="select-all">
                            <input type="checkbox" name="all" id="all">
                            <span>全选</span>
                        </div>
                        <div class="menu">
                            <span>商品</span>
                            <span>数量</span>
                            <span>金额</span>
                        </div>
                    </div>
                    <div class="bg-logo"><img src="../img/img/reg/logo.png" alt="" srcset=""></div>
                    <ul class="list-car">
                        <!-- <li>
                            <div class="single"><input type="checkbox" name="single" id="single"></div>
                            <div class="carImg"><img src="../img/img/goods/paint-lb1.jpg"></div>
                            <div class="carInfo">
                                <p>Gap</p>
                                <p>
                                    男装|弹力中腰紧身卡其裤
                                </p>
                                <div class="specifications">
                                    <p><span>颜色：</span> 经典海军蓝</p>
                                    <p><span>尺码：</span> 29/30(170/74A)</p>
                                </div>
                                <p><span>￥299</span><del>￥399</del></p>
                                <div class="opeator"><span>编辑</span><i>删除</i></div>

                            </div>
                            <div class="increase">
                                <em>-</em><span>1</span><em>+</em>
                            </div>
                            <div class="single-price"><span>￥299</span></div>
                        </li> -->
                    </ul>
                </div>
                <div class="right">
                    <div class="order-head">
                        <span>订单摘要</span>
                    </div>
                    <div class="good-price">
                        <span>订单总额</span><i>￥<b>0.00</b></i>
                    </div>
                    <!-- <div class="all-price">
                        <span>订单总金额</span><i>￥<b>0.00</b></i>
                    </div> -->
                    <button class="calc">立即结算</button><br>
                    <button class="continue">继续购物</button>
                </div>
            </div>
        </div>
    </section>
    <footer>
        <div class="inner footer-height ">
            <div class="new ">
                <p>BE THE FIRST TO KNOW</p>
                <p>第一时间获取Gap最新资讯</p>
            </div>
            <form action=" " class="ema ">
                <input type="email " name=" " id=" " placeholder="输入您的电子邮箱地址 ">
                <i class="iconfont ">&#xe696;</i>
            </form>
            <div class="focus ">
                <span>关注我们</span>
                <i class="iconfont ">&#xe6a5;</i>
                <i class="iconfont ">&#xe675;</i>
            </div>
            <div class="online ">
                <p><i class="iconfont ">&#xe609;</i>在线客服</p>
                <p>服务时间:10:00-22:00</p>
            </div>
        </div>
        <div class="info inner ">
            <ul>
                <li>
                    用户支持
                </li>
                <li>
                    <a href="javascript:; ">新手上路</a>
                </li>
                <li>
                    <a href="javascript:; ">会员服务</a>
                </li>
                <li>
                    <a href="javascript:; ">退换货政策</a>
                </li>
                <li>
                    <a href="javascript:; ">支付配送</a>
                </li>
                <li>
                    <a href="javascript:; ">帮助中心</a>
                </li>

            </ul>
            <ul>
                <li>
                    关于Gap
                </li>
                <li>
                    <a href="javascript:; ">联系我们</a>
                </li>
                <li>
                    <a href="javascript:; ">隐私条款</a>
                </li>
                <li>
                    <a href="javascript:; ">加入我们</a>
                </li>
                <li>
                    <a href="javascript:; ">品牌故事</a>
                </li>

            </ul>
            <ul class="websit ">
                <li>网站咨询</li>
                <li>
                    <p>订购热线：400-690-5151</p>
                    <p>服务时间:10:00-22:00</p>
                </li>
                <li>
                    <p>售后服务热线: 400-680-8517</p>
                    <p>服务时间:10:00-19:00</p>
                </li>
            </ul>
            <div class="console ">
                <div>
                    <p>门店查询</p>
                    <img src="../img/img/index/FOOTER_store.06dde1c909439e219a92dd4dc27f63b4.jpg " alt=" " srcset=" ">
                </div>
                <h6><a href="javascript ">立即查询</a></h6>
                <div>
                    <span>门店售后电话：021-60934300</span>
                </div>
            </div>
            <div class="find-card ">
                <div class="find ">
                    <p>Gap企业服务/团购</p>
                    <h6><a href="javascript ">立即查询</a></h6>
                </div>
                <div class="card ">
                    <p>Gap礼品卡购买/激活</p>
                    <img src="../img/img/index/gift-card@2x.f1200d8e0f844dc203595f91531e6fa9.png " alt=" ">
                </div>
            </div>
            <div class="download ">
                <p>下载Gap APP</p>
                <img src="../img/img/index/qrcode@2x.10ee7de6775e788bf18eac477241d932.png " alt=" " srcset=" ">
            </div>
        </div>
        <div class="foot-script inner ">
            <p>Gap全球站点： United States|Canada|Japan|Europe</p>
            <p>沪ICP备10200002号|沪公网备31010602000818|上海工商</p>
            <p>浏览该网站表示您接收并同意我们使用cookies为您提供个性化的浏览体验。如需更改管理，请点击 <a href="javascript:; ">隐私条款</a>&nbsp; 了解详情</p>
            <p>© 2019 Gap Inc.</p>
        </div>
    </footer>
    <div class="returnTop "><a class="iconfont " href="# ">&#xe643;</a></div>
</body>

</html>